<div class="my-body">
    <mat-horizontal-stepper linear="true" labelPosition="bottom" #stepper>
        <mat-step editable="false" [completed]="firstCompleted">
            <ng-template matStepLabel>手机号</ng-template>
            <div style="height: 100px;"></div>
            <mat-form-field class="full-width" floatLabel="auto">
                <input matInput placeholder="绑定手机号" [formControl]="bindMobile" required>
            </mat-form-field>
            <div style="display: flex; align-items:center;  justify-content: center;z-index: 10;position: relative;">
                <app-slide-control (successMatch)="successMatch($event)">
                </app-slide-control>
            </div>
            <div class="my-top-bottom-8">                
                <button mat-raised-button color="primary" style="float:right" (click)="sendSMS()"
                    [disabled]="bindMobile.invalid || move == undefined || changeCountDown !== 0">{{changeCountDownLabel}}</button>
            </div>
        </mat-step>
        <mat-step editable="false">
            <ng-template matStepLabel>重置密码</ng-template>
            <mat-form-field class="full-width" floatLabel="never">
                <input matInput placeholder="请输入新密码" [formControl]="changePwd" [type]="hide ? 'password' : 'text'"
                    required>
                <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
                <mat-error *ngIf="changePwd.invalid">
                    大于6位,必须分别包含1个数字/小/大写字母/特殊字符
                </mat-error>
            </mat-form-field>
            <div style="display: flex;">
                <mat-form-field class="full-width" floatLabel="auto">
                    <input matInput placeholder="短信验证码" [formControl]="changeCode" required>
                </mat-form-field>
                
            </div>

            <div>
                    <span *ngIf="userName">请确认你的帐号用户名：{{userName}}</span>
                    <button mat-raised-button color="primary" style="float:right" (click)="change()"
                        [disabled]="changeCode.invalid || changePwd.invalid">修改</button>
                </div>
            
        </mat-step>
        <mat-step>
            <ng-template matStepLabel>完成</ng-template>
        </mat-step>
    </mat-horizontal-stepper>
</div>